<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row class="live_wrapper clearfix">
                        <Button type="primary" style="float:right;width:90px;height: 34px;font-size: 14px;" @click="addCompany">添加</Button>
                        <Input v-model="filter.name" @on-search="search" search enter-button="查询" placeholder="请输入施工单位名称"
                               style="width:290px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        <Select v-model="filter.type" style="float:right; width: 200px;margin-right: 35px;" @on-change="search" placeholder="单位类型">
                           <Option value="0">全部</Option>
                           <Option value="1">抢修队</Option>
                           <Option value="2">施工单位</Option>
                        </Select>
                    </Row>
                    <Row class="margin-top-10 table_pattern table_pattern2">
                        <Table :loading="loading" :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="edit" :title="title" width="900px" :mask-closable="false" class="goods_modal" :z-index='100'>
            <Form :model="formValidate" ref="formValidate" :label-width="100">
                <FormItem label="单位类型" prop="type" class="view_type1">
                  <RadioGroup v-model="formValidate.type">
                      <Radio label="1">抢修队</Radio>
                      <Radio label="2">施工单位</Radio>
                      <Radio label="3">两者都是</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="单位名称" prop="name" class="label_required">
                    <Input v-model="formValidate.name" placeholder="请输入单位名称" style='width:300px'/>
                </FormItem>
                <FormItem label="所属区域" prop="area_id" class="label_required" v-if='formValidate.type!=2'>
                    <Cascader :data="city_list" v-model="city_value" @on-change='selectCity' style="width: 300px;margin-right: 10px;" placeholder="所属区域"></Cascader>
                </FormItem>
                <FormItem label="电压等级" class="label_required"  v-if='formValidate.type!=1'>
                    <CheckboxGroup v-model="voltage_arr" @on-change="selectVoltage">
                      <Checkbox v-for="(item,key) in voltage_list" :key="key" :label="item.id" class="auth_check">
                        <span>{{item.name}}</span>
                      </Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="服务类型" class="label_required"  v-if='formValidate.type!=1'>
                    <CheckboxGroup v-model="service_arr" @on-change="selectService">
                      <Checkbox v-for="(item,key) in service_list" :key="key" :label="item.id" class="auth_check">
                        <span>{{item.name}}</span>
                      </Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="单位介绍" prop="desc" class="label_required">
                    <NEditor v-if="!spinShow" :msg="formValidate.desc" @changeMsg="changeMsg"></NEditor>
                </FormItem>
                <FormItem>
                    <Button :loading="saving" type="primary" @click="handleSubmit" style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import config from '@/config'
    import { companyList, editCompany, changeCompanyStatus, companyTagListForSelect, cityListForSelect} from '@/api/main'
    export default {
        data() {
            return {
                pagenation: {},
                columns: [
                    {
                        key: 'name',
                        title: '名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.name)
                        },
                    },
                    {
                        key: 'type_name',
                        title: '单位类型',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', parseInt(params.row.type) == 1 ? '抢修队' : (parseInt(params.row.type) == 2 ? '施工单位' : '抢修队、施工单位') )
                        },
                    },
                    {
                      key: 'status',
                      title: '状态',
                      width: 150,
                      align: 'center',
                      render: (h, params) => h('i-switch', {
                        props: {
                          value: params.row.status,
                          size: 'large',
                          'true-value': 1,
                          'false-value': 0
                        },
                        on: {
                          'on-change': () => {
                            this.changeCompanyStatus(params.row)
                          }
                        }
                      }, [
                        h('span', {
                          slot: 'open',
                          domProps: {
                            innerHTML: '开启'
                          }
                        }),
                        h('span', {
                          slot: 'close',
                          domProps: {
                            innerHTML: '关闭'
                          }
                        })
                      ]
                      )
                    },
                    {
                        key: 'created_time',
                        title: '创建时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.created_time)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.editCompany(params.row)
                                          },
                                      },
                                  },
                                  '编辑',
                              )
                            ])
                        },
                    },
                ],
                edit: false,
                title: '添加施工单位',
                list: [],
                city_list: [],
                city_value: [],
                voltage_list: [],
                service_list: [],
                voltage_arr: [],
                service_arr: [],
                loading: true,
                saving: false,
                spinShow: false,
                formValidate: {
                    id: 0,
                    name: '',
                    area_id: 0,
                    voltage_level: '',
                    service_type: '',
                    desc: '',
                    type: '1',
                },
                filter: {
                    page: 0,
                    type: -1,
                    name: ''
                },
            }
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            selectCity(value){
              this.formValidate.area_id = value[2]
            },
            changeMsg (msg) {
                this.formValidate.desc = msg
            },
            addCompany: function () {
              this.spinShow = true
              this.formValidate.desc = ''
              this.formValidate.id = 0
              this.title = '添加施工单位'
              this.voltage_arr = []
              this.service_arr = []
              this.formValidate.area_id = 0
              this.city_value = []
              this.handleReset('formValidate')
              this.edit = true
              setTimeout(() => {
                  this.spinShow = false
              }, 1)
            },
            handleReset(name) {
                this.$refs[name].resetFields()
            },
            editCompany: function(obj){
                this.spinShow = true
                this.formValidate = Object.assign({}, obj)
                this.formValidate.type = this.formValidate.type.toString()
                this.city_value = obj.city_value
                this.voltage_arr = obj.voltage_level ? obj.voltage_level.split(',') : []
                this.service_arr = obj.service_type ? obj.service_type.split(',') : []
                for (let i=0; i<this.voltage_arr.length; i++ ) {
                  this.voltage_arr[i] = parseInt(this.voltage_arr[i])
                }
                for (let i=0; i<this.service_arr.length; i++ ) {
                  this.service_arr[i] = parseInt(this.service_arr[i])
                }
                this.title = '编辑施工单位'
                this.edit = true
                setTimeout(() => {
                    this.spinShow = false
                }, 1)
            },
            selectVoltage(data) {
              this.voltage_arr = data;
            },
            selectService(data) {
              this.service_arr = data;
            },
            changeCompanyStatus(obj) {
              changeCompanyStatus(obj).then(res => {
                  if (res.code === 0) {
                    this.$Message.success('操作成功')
                    this.init()
                  } else {
                      this.$Message.error(res.text)
                  }
              })
            },
            handleSubmit() {
                if (this.formValidate.name == '') {
                    this.$Message.error("请输入施工单位名称");return;
                }
                if (parseInt(this.formValidate.type)==1 && this.formValidate.area_id == 0) {
                    this.$Message.error("请选择抢修队所在区域");return;
                }
                if (parseInt(this.formValidate.type)==2 && this.voltage_arr.length == 0) {
                    this.$Message.error("请选择电压等级");return;
                }
                if (parseInt(this.formValidate.type)==2 && this.service_arr.length == 0) {
                    this.$Message.error("请选择服务类型");return;
                }
                if (parseInt(this.formValidate.type)==2) {
                  this.formValidate.voltage_level = this.voltage_arr.join(',')
                  this.formValidate.service_type = this.service_arr.join(',')
                }
                //console.log(this.formValidate);return;
                editCompany(this.formValidate).then(res => {
                    if (res.code === 0) {
                      this.$Message.success('操作成功')
                      this.edit = false
                      this.init()
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            },
            init () {
                companyList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.loading = false
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    }
                })
            }
        },
        mounted() {
            this.init();
            companyTagListForSelect({type: 3}).then(res => {
              this.voltage_list = res.data
            })
            companyTagListForSelect({type: 4}).then(res => {
              this.service_list = res.data
            })
            cityListForSelect().then(res => {
                this.city_list = res.data
            })
        }
    }
</script>
